<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>promise 打字</title>
	<style>
		body {
			font-size: 14px;
			font-family: 'microsoft yahei';
			background: #eee;

		}

		#content {
			
			width: 800px;
			margin: 40px auto;
			border-radius: 5px;
			text-align: left;
			background: url("http://travel.tianya.cn/photo/jd/shx-jingd-043/shx-jingd-043a.jpg");
			min-height: 500px;
			background-repeat: no-repeat;
		}
		#inner {
			margin-left: 180px;
			font-size: 30px;
		}
	</style>
</head>
<body>
	<p style="text-align:center;">
		<audio  autoplay src="http://win.web.ra03.sycdn.kuwo.cn/a62011bccb9f5f3fa117e78e44020197/568f1ac1/resource/a3/48/30/28/3493737337.aac" controls="controls">
		您的浏览器不支持音乐！。
	</audio>
	</p>
	<div id="content">
		<div id="inner"></div>
	</div>
	<script>
		var contentObj = document.querySelector("#inner");
		var sequence = "登鹳鹊楼 王之涣|白日依山尽， |黄河入海流。 |欲穷千里目， |更上一层楼。 ";
		var arr = sequence.split("");
		function print(word) {
			contentObj.innerHTML = contentObj.innerHTML + word;
		}

		var p = new Promise(function(resolve, reject) {
			setTimeout(function() {
				// console.log("init");
				resolve("");
			},800);
		});
		for(var i = 0; i < arr.length; i++) {
			(function(i) {
				p.then(function(result){
					return new Promise(function(resolve,reject) {
						setTimeout(function() {
							var word = arr[i];
							// console.log("print %s", word);
							if(word == "|") {
								print("<br>");
							}else{
								print(word);
							}
							
							resolve(word);
						},(i+ 1) * 700);
					});
				});
			})(i);
		}

	</script>
</body>
</html>